<template>
	<view class="custom-tab-bar">
		<view 
			class="tab-item" 
			v-for="(item, index) in list" 
			:key="index"
			@click="switchTab(index)"
			:class="{ active: selected === index }"
		>
			<uni-icons 
				:type="getIconType(item.iconName, selected === index)" 
				:color="selected === index ? selectedColor : color" 
				size="24"
			/>
			<text class="tab-text" :style="{ color: selected === index ? selectedColor : color }">
				{{ item.text }}
			</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			color: '#6B7280',
			selectedColor: '#3B82F6',
			selected: 0,
			list: [
				{
					pagePath: '/pages/index/index',
					iconName: 'home',
					text: '首页'
				},
				{
					pagePath: '/pages/calendar/calendar',
					iconName: 'calendar',
					text: '日历'
				},
				{
					pagePath: '/pages/schedule/schedule',
					iconName: 'grid',
					text: '课表'
				},
				{
					pagePath: '/pages/statistics/statistics',
					iconName: 'chart',
					text: '统计'
				},
				{
					pagePath: '/pages/settings/settings',
					iconName: 'gear',
					text: '设置'
				}
			]
		}
	},
	methods: {
		getIconType(iconName, isActive) {
			// 根据图标名称和激活状态返回对应的uni-icons类型
			const iconMap = {
				home: isActive ? 'home-filled' : 'home',
				calendar: isActive ? 'calendar-filled' : 'calendar',
				grid: isActive ? 'grid-filled' : 'grid',
				chart: isActive ? 'bars' : 'bars',
				gear: isActive ? 'gear-filled' : 'gear'
			}
			return iconMap[iconName] || iconName
		},
		
		switchTab(index) {
			this.selected = index
			const item = this.list[index]
			uni.switchTab({
				url: item.pagePath
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 64px;
	background-color: #FFFFFF;
	display: flex;
	border-top: 1px solid #D1D5DB;
	z-index: 1000;
	
	/* 适配安全区域 */
	padding-bottom: env(safe-area-inset-bottom);
	padding-bottom: constant(safe-area-inset-bottom);
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	transition: all 0.2s ease;
	
	&.active {
		transform: scale(1.05);
	}
}

.tab-text {
	font-size: 12px;
	margin-top: 4px;
	transition: color 0.2s ease;
}
</style> 